<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
  .box2{
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:220px;
    background-color:#eee;
    border:2px solid #aaa;
      margin-left:-150px;
      margin-top:-110px;
  }
  </style>
</head>
<body>
  <div class="box">
  </div>
  <nav>
    <a href="#" class="key">write</a>
  </nav>
  <ul class="article_list">
  </ul>
  <div class="box2">
    <input type="text" name="title" placeholder="文章标题">
    <textarea name="content" placeholder="文章内容"></textarea>
      <button type="button" name="button">确认</button>
  </div>
  <script>
  // $.post("/jquery_ajax_post",{qinghua:"i love mingzhen"},function (res){
  //   console.log(res);
  // });
  // $.get("/jqurey_ajax_get",{group:"javascript"},function (res){
  //   console.log(res);
  // });
  // $(".box").load("/jquery_ajax_load");
                  var titleInput=$(".box2 input");
                  var contentInput=$(".box2 textarea");
                  var submitInput=$(".box2 button");
                  var box=$(".box2");
                  var key=$(".key");
                  var list=$(".article_list");

              function makeHTML(title,body){
                return `
                <article>
                  <h1>${title}</h1>
                  <p>${body}</p>
                </article>
                `
              }
            $.get("/init",function (data){
              data.forEach(article=>{
                list.append(makeHTML(article.title,article.content));
              });
            });

                  key.click(function (event){
                    event.preventDefault();
                    box.css({display:"block"});
                  });

                submitInput.click(function (event){
                  let title=titleInput.val();
                  let content=contentInput.val();
                  list.append(makeHTML(title,content));
                  $.post("/up",{title,content});
                  titleInput.val("");
                  contentInput.val("");
                });
  </script>
</body>
</html>
